<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>滑块</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <link rel="icon" href="../img/web/web.ico"/>
    <link rel="stylesheet" href="../layui/css/layui.css"/>
    <link rel="stylesheet" href="../css/app.css"/>
    <style>
        .demo-slider {
            margin: 40px 20px;
        }
    </style>
<body ontouchstart="">

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">

        <div class="layui-col-md6">
            <div class="layui-row layui-col-space15">

                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header layui-elip">基本滑块</div>
                        <div class="layui-card-body">
                            <div id="slideTest1" class="demo-slider"></div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header layui-elip">定义初始值</div>
                        <div class="layui-card-body">
                            <div id="slideTest2" class="demo-slider"></div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header layui-elip">设置最大最小值</div>
                        <div class="layui-card-body">
                            <div id="slideTest3" class="demo-slider"></div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header layui-elip">设置步长</div>
                        <div class="layui-card-body">
                            <div id="slideTest4" class="demo-slider"></div>
                            <div id="slideTest5" class="demo-slider"></div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header layui-elip">设置提示文本</div>
                        <div class="layui-card-body">
                            <div id="slideTest6" class="demo-slider"></div>
                            <div id="slideTest7" class="demo-slider"></div>
                            <div id="test-slider-tips1"></div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header layui-elip">开启输入框</div>
                        <div class="layui-card-body">
                            <div id="slideTest8" class="demo-slider"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-row layui-col-space15">

                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header layui-elip">开启范围选择</div>
                        <div class="layui-card-body">
                            <div id="slideTest9" class="demo-slider"></div>
                            <div id="test-slider-tips2"></div>
                            <div id="slideTest10" class="demo-slider"></div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header layui-elip">垂直滑块</div>
                        <div class="layui-card-body">
                            <div id="slideTest11" style="margin: 45px 30px; display: inline-block;"></div>
                            <div id="slideTest12" style="margin: 45px 30px; display: inline-block;"></div>
                            <div id="slideTest13" style="margin: 45px 30px; display: inline-block;"></div>
                            <div id="slideTest14" style="margin: 45px 30px; display: inline-block;"></div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header layui-elip">自定义颜色</div>
                        <div class="layui-card-body">
                            <div id="slideTest15" class="demo-slider"></div>
                            <div id="slideTest16" class="demo-slider"></div>
                            <div id="slideTest17" class="demo-slider"></div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header layui-elip">禁用滑块</div>
                        <div class="layui-card-body">
                            <div id="slideTest18" class="demo-slider"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<script type="text/javascript" src="../layui/layui.js"></script>
<script type="text/javascript">
layui.use('slider',function(){
    var $ = layui.$, slider = layui.slider;

    // 默认滑块
    slider.render({
        elem: '#slideTest1'
    });

    // 定义初始值
    slider.render({
        elem: '#slideTest2'
        ,value: 20          // 初始值
    });

    // 设置最大最小值
    slider.render({
        elem: '#slideTest3'
        ,min: 20            // 最小值
        ,max: 50            // 最大值
    });

    // 设置步长
    slider.render({
        elem: '#slideTest4'
        ,step: 10           // 步长
    });

    slider.render({
        elem: '#slideTest5'
        ,step: 10           // 步长
        ,showstep: true     // 开启间隔点
    });

    //设置提示文本
    slider.render({
        elem: '#slideTest6'
        ,min: 20
        ,max: 1000
        ,setTips: function(value){  // 自定义提示文本
            return value + 'GB';
        }
    });
    slider.render({
        elem: '#slideTest7'
        ,tips: false        // 关闭默认提示层
        ,change: function(value){
            $('#test-slider-tips1').html('当前数值：'+ value);
        }
    });

    // 开启输入框
    slider.render({
        elem: '#slideTest8'
        ,input: true        // 输入框
    });

    // 开启范围选择
    slider.render({
        elem: '#slideTest9'
        ,value: 40          // 初始值
        ,range: true        // 范围选择
        ,change: function(vals){
            $('#test-slider-tips2').html('开始值：'+ vals[0] + '、结尾值：'+ vals[1]);
        }
    });
    slider.render({
        elem: '#slideTest10'
        ,value: [30, 60]    // 初始值
        ,range: true        // 范围选择
    });

    // 垂直滑块
    slider.render({
        elem: '#slideTest11'
        ,type: 'vertical'   // 垂直滑块
    });
    slider.render({
        elem: '#slideTest12'
        ,value: 30
        ,type: 'vertical'   // 垂直滑块
    });
    slider.render({
        elem: '#slideTest13'
        ,value: 50
        ,range: true        // 范围选择
        ,type: 'vertical'   // 垂直滑块
    });
    slider.render({
        elem: '#slideTest14'
        ,value: 80
        ,input: true        // 输入框
        ,type: 'vertical'   // 垂直滑块
    });

    // 自定义颜色
    slider.render({
        elem: '#slideTest15'
        ,theme: '#1E9FFF'   // 主题色
    });
    slider.render({
        elem: '#slideTest16'
        ,value: 50
        ,theme: '#5FB878'   // 主题色
    });
    slider.render({
        elem: '#slideTest17'
        ,value: [30, 70]
        ,range: true
        ,theme: '#FF5722'   // 主题色
    });

    // 禁用滑块
    slider.render({
        elem: '#slideTest18'
        ,value: 35
        ,disabled: true     // 禁用滑块
    });


});
</script>
</body>
</html>